CSS 3
Se o HTML é a estrutura da casa, o CSS (Cascading Style Sheets) é o design de interiores. É ele quem define cores,
fontes, layouts e até animações.
Para dominar o CSS, você precisa entender quatro conceitos fundamentais que regem como o estilo é aplicado:
1. Seletores e Declarações
O CSS funciona através de regras. Uma regra "seleciona" um elemento HTML e "declara" o que deve mudar nele.
• Seletor: Indica qual elemento será estilizado (ex: h1, .classe, #id).
• Declaração: Composta por uma Propriedade e um Valor.
CSS
Exemplo de regra CSS
p { color: blue; /* Propriedade: color | Valor: blue */
font-size: 16px; /* Propriedade: font-size | Valor: 16px */}
2. O Modelo de Caixa (Box Model)
Este é o conceito mais importante para entender o layout. O navegador vê cada elemento HTML como uma caixa retangular. Essa caixa é composta por quatro camadas:
1. Content: Onde fica o texto ou imagem.
2. Padding (Preenchimento): O espaço interno entre o conteúdo e a borda.
3. Border (Borda): A linha que envolve o preenchimento e o conteúdo.
4. Margin (Margem): O espaço externo, usado para afastar um elemento de outro.
3. Cascata e Especificidade (O "C" do CSS)
O nome "Cascading" (Cascata) refere-se à ordem de prioridade que o navegador usa para decidir qual estilo aplicar quando há conflitos:
• Cascata: Se houver duas regras iguais para o mesmo elemento, a que estiver por último no arquivo geralmente vence.
• Especificidade: Um seletor de ID (#menu) é mais forte que um seletor de classe (.item), que por sua vez é mais forte que um seletor de tag (p).
• Herança: Alguns estilos (como font-family ou color) são passados dos elementos "pais" para os "filhos" automaticamente.
4. Sistemas de Layout (Flexbox e Grid)
Antigamente, alinhar elementos no CSS era um pesadelo. Hoje, usamos dois sistemas principais:
• Flexbox: Focado em layouts unidimensionais (alinhar itens em uma linha ou em uma coluna). É excelente para componentes como barras de navegação.
• CSS Grid: Focado em layouts bidimensionais (linhas e colunas simultaneamente). Ideal para a estrutura completa da página.
5. Unidades de Medida
No CSS, você não usa apenas pixels (px). Existem unidades relativas que ajudam na criação de sites que se adaptam a diferentes telas:
• Unidades Absolutas: px (fixo).
• Unidades Relativas: % (porcentagem do pai), vw/vh (porcentagem da largura/altura da tela) e em/rem (baseadas no tamanho da fonte).
Dica de Ouro: Sempre que possível, prefira unidades relativas para que seu site seja "responsivo" (funcione bem tanto no celular quanto no monitor).
Para dominar o CSS, você precisa entender quatro conceitos fundamentais que regem como o estilo é aplicado:
1. Seletores e Declarações
O CSS funciona através de regras. Uma regra "seleciona" um elemento HTML e "declara" o que deve mudar nele.
• Seletor: Indica qual elemento será estilizado (ex: h1, .classe, #id).
• Declaração: Composta por uma Propriedade e um Valor.
CSS
Exemplo de regra CSS
p { color: blue; /* Propriedade: color | Valor: blue */
font-size: 16px; /* Propriedade: font-size | Valor: 16px */}
2. O Modelo de Caixa (Box Model)
Este é o conceito mais importante para entender o layout. O navegador vê cada elemento HTML como uma caixa retangular. Essa caixa é composta por quatro camadas:
1. Content: Onde fica o texto ou imagem.
2. Padding (Preenchimento): O espaço interno entre o conteúdo e a borda.
3. Border (Borda): A linha que envolve o preenchimento e o conteúdo.
4. Margin (Margem): O espaço externo, usado para afastar um elemento de outro.
3. Cascata e Especificidade (O "C" do CSS)
O nome "Cascading" (Cascata) refere-se à ordem de prioridade que o navegador usa para decidir qual estilo aplicar quando há conflitos:
• Cascata: Se houver duas regras iguais para o mesmo elemento, a que estiver por último no arquivo geralmente vence.
• Especificidade: Um seletor de ID (#menu) é mais forte que um seletor de classe (.item), que por sua vez é mais forte que um seletor de tag (p).
• Herança: Alguns estilos (como font-family ou color) são passados dos elementos "pais" para os "filhos" automaticamente.
4. Sistemas de Layout (Flexbox e Grid)
Antigamente, alinhar elementos no CSS era um pesadelo. Hoje, usamos dois sistemas principais:
• Flexbox: Focado em layouts unidimensionais (alinhar itens em uma linha ou em uma coluna). É excelente para componentes como barras de navegação.
• CSS Grid: Focado em layouts bidimensionais (linhas e colunas simultaneamente). Ideal para a estrutura completa da página.
5. Unidades de Medida
No CSS, você não usa apenas pixels (px). Existem unidades relativas que ajudam na criação de sites que se adaptam a diferentes telas:
• Unidades Absolutas: px (fixo).
• Unidades Relativas: % (porcentagem do pai), vw/vh (porcentagem da largura/altura da tela) e em/rem (baseadas no tamanho da fonte).
Dica de Ouro: Sempre que possível, prefira unidades relativas para que seu site seja "responsivo" (funcione bem tanto no celular quanto no monitor).